<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>小结</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
    </style>
    <script src="../lib/jquery/jquery.min.js"></script>
    <script>
        window.onload = function (){
            console.log("window.onload");
        }

        $(function(){
            console.log("jquery function");
        })
    </script>
</head>
<body>
    jQuery  快速简洁方便的JS框架 
        引入：1. 下载   2. CDN   控制台能输出 $/jQuery
        选择器：$() => 和 querySelector() 接受的值差不多
            返回值是 jQ 对象： 由选择到的 DOM 对象组成的伪数组，没选择到数组长度为0
            #id / .class / tagName / 后代 / 并集 / 交集 / 属性
            + ~ > 
            :eq(index)  :lt(index)  :gt(index)  :first/last  :event/odd
        调用 $ 是调用函数，因此【相同选择器】每次返回值不一样，但是返回的对象包含的DOM是一样的

        推荐 $变量名 获取频繁操作的 jQ 对象

        入口函数  $(function(){}) => 可以设置多个，在页面有大资源加载的情况下优先于 window.onload 执行

        关系节点
            $ele.parent()/children()/next()/prev()/nextAll()/prevAll()/siblings()/ find(selector)
        操作类名
            $ele.addClass()/removeClass()/toggleClass()/hasClass()
        操作样式
            $ele.css(styleName) 获取样式
            $ele.css(styleName, styleValue) 设置样式
            $ele.css({ styleName: styleValue, ...})  设置多个样式
        操作属性
            $ele.attr(propName) 获取属性
                .attr(propName, propValue) 设置属性
                .attr({ propName: propValue, ...}) 设置多个属性
                .removeAttr(propName) 删除属性

    

    <script type="text/javascript">
        
    </script>
</body>
</html>